<template>
  <div id="header">
    <div class="top">
      <img src="../assets/images/kongtiao.png" alt="" />
    </div>
    <div class="bottom">
      <ul>
        <li>
          <div class="bo-left">
            <img src="../assets/images/shao.png" alt="" />
          </div>
          <div class="bo-right">
            <div class="top-rig t1">扫一扫</div>
            <div class="bottom-rig r1">扫设备二维码</div>
          </div>
        </li>
        <li>
          <div class="bo-left">
            <img src="../assets/images/jilu.png" alt="" />
          </div>
          <div class="bo-right">
            <div class="top-rig t2">预约</div>
            <div class="bottom-rig r2">寻找附近设备</div>
          </div>
        </li>
        <li>
          <div class="bo-left">
            <img src="../assets/images/ka.png" alt="" />
          </div>
          <div class="bo-right">
            <div class="top-rig t3">我的订单</div>
            <div class="bottom-rig r3">查看运行进度</div>
          </div>
        </li>
        <li>
          <div class="bo-left">
            <img src="../assets/images/ma.png" alt="" />
          </div>
          <div class="bo-right">
            <div class="top-rig t4">我的优惠劵</div>
            <div class="bottom-rig r4">商家发放的优惠</div>
          </div>
        </li>
        <li>
          <div class="bo-left">
            <img src="../assets/images/wenti.png" alt="" />
          </div>
          <div class="bo-right">
            <div class="top-rig t5">洗烘-常见问题</div>
            <div class="bottom-rig r5">各种解决方案</div>
          </div>
        </li>
        <li>
          <div class="bo-left">
            <img src="../assets/images/xiaopiao.png" alt="" />
          </div>
          <div class="bo-right">
            <div class="top-rig t6">问题反馈进度</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>



<script>
export default {
  name: "myFunction",
};
</script>

<style lang="scss" scoped>
#header {
  .top {
    img {
      width: 100%;
      height: 100px;
    }
  }
  .bottom {
    background-color: #f6f6f6;
    padding-bottom: 20px;
    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      li {
        background-color: #fff;
        width: 130px;
        height: 100px;
        margin-left: 35px;
        margin-top: 20px;
        .bo-left {
          img {
            width: 50px;
            height: 50px;
            padding-left: 35px;
            padding-top: 10px;
          }
        }
        .bo-right {
          .top-rig {
            font-size: 14px;
            margin-left: 44px;
          }
          .t1 {
            margin-left: 44px !important;
          }
          .t2 {
            margin-left: 51px !important;
          }
          .t3 {
            margin-left: 41px !important;
          }
          .t4 {
            margin-left: 32px !important;
          }
          .t5 {
            margin-left: 25px !important;
          }
          .t6 {
            margin-left: 27px !important;
          }
          .bottom-rig {
            color: #a7a7a7;
            font-size: 12px;
            margin-left: 27px;
          }
          .r1 {
            margin-left: 29px !important;
          }
          .r2 {
            margin-left: 30px !important;
          }
          .r3 {
            margin-left: 33px !important;
          }
          .r4 {
            margin-left: 27px !important;
          }
          .r5 {
            margin-left: 30px !important;
          }
        }
      }
    }
  }
}
</style>